<template>
	<view class="wrapper">
		<uni-forms ref="formRef" :modelValue="formData" label-position="top" :rules="rules">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age">
				<input type="text" v-model="formData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item required name="hobby" label="兴趣爱好">
				<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm">Submit</button>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const rules = {
	// 对name字段进行必填验证
	name: {
		rules: [
			{
				required: true,
				errorMessage: '请输入姓名'
			},
			{
				minLength: 3,
				maxLength: 5,
				errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
			}
		]
	},
	age: {
		rules: [
			{
				required: true,
				errorMessage: '请输入年龄'
			}
		]
	}
}
// data
const formData = reactive({
	name: '',
	age: 0,
	hobby: 'draw'
})

const hobby = [
	{ value: 0, text: '篮球' },
	{ value: 1, text: '足球' },
	{ value: 2, text: '游泳' }
]

const formRef = ref()
const submitForm = () => {
	formRef.value.validate()
	.then((res) => {
		console.log('表单数据信息：', res);
	})
	.catch((err) => {
		console.log('表单错误信息：', err);
	})
}
</script>

<style scoped lang="scss">
.wrapper {
	padding: 0 40rpx;
}
</style>
